<script>
// 数据分析
export default {
  name: 'DataAnalysis',
  data() {
    return {
      cardItems: [
        {
          id: '1',
          title: '泰森多边形',
          desc: '根据输入点要素生成泰森多边形',
          image: this.getBase64Image('analysis1.png'),
        },
        {
          id: '2',
          title: '方向分布(标准差椭圆)',
          desc: '概况地理要素中心趋势。分布方向趋势等空间特征',
          image: this.getBase64Image('analysis2.png'),
        },
        {
          id: '3',
          title: '交集',
          desc: '截取要素相交部分，并且保留二者的全部属性',
          image: this.getBase64Image('analysis3.png'),
        },
        {
          id: '4',
          title: '差集',
          desc: '留取输入数据与裁剪数据不同的部分',
          image: this.getBase64Image('analysis4.png'),
        },
        {
          id: '5',
          title: '并集',
          desc: '将两个相交或接触的元素合并为一个',
          image: this.getBase64Image('analysis2.png'),
        },
        {
          id: '6',
          title: '缓冲区分析',
          desc: '留取输入数据与裁剪数据不同的部分',
          image: this.getBase64Image('analysis1.png'),
        },
        {
          id: '7',
          title: '网格分析',
          desc: '将两个相交或接触的元素合并为一个',
          image: this.getBase64Image('analysis4.png'),
        },
        {
          id: '8',
          title: '路径分析',
          desc: '留取输入数据与裁剪数据不同的部分',
          image: this.getBase64Image('analysis1.png'),
        },
        {
          id: '9',
          title: '智能分区',
          desc: '将两个相交或接触的元素合并为一个',
          image: this.getBase64Image('analysis4.png'),
        },
        {
          id: '10',
          title: '插值分析',
          desc: '将两个相交或接触的元素合并为一个',
          image: this.getBase64Image('analysis3.png'),
        },
      ],
    };
  },
  methods: {
    viewData(item) {
      this.$router.push(`/analysisDetai/${item.id}`);
    },
    getBase64Image(imageName) {
      return require(`../../../assets/analysis/${imageName}`);
    },
  },
};
</script>
<template>
  <div class="analysis-host">
    <div class="analysis-header">
      <i>1</i>
      <div class="analysis-title">
        <h3>选择模型</h3>
        <p>请以下列表选择分析模型，点击下一步</p>
      </div>
    </div>
    <div class="analysis-content">
      <Row
        type="flex"
        justify="start">
        <Card
          v-for="item in cardItems"
          :key="item.id"
          @click.native="viewData(item)">
          <div class="analysis-card">
            <div class="analysis-card-image">
              <img :src="item.image" />
            </div>
            <div class="analysis-card-desp">
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </Card>
      </Row>
    </div>
  </div>
</template>


<style lang="less">
.analysis-host {
  width: 100%;
  height: 100%;
  background-color: rgb(243, 243, 243);
}

.analysis-header {
  height: 100px;
  padding: 20px 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
  > i {
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    font-style: normal;
    background-color: rgb(64, 135, 248);
    margin: 0 0 0 15px;
  }
  .analysis-title {
    margin-left: 80px;
    > p {
      margin-top: 5px;
    }
  }
}

.analysis-content {
  padding: 20px 50px;
  height: calc(~'100vh - 160px');
  overflow-y: auto;
  .analysis-card {
    width: 310px;
    cursor: pointer;
    .analysis-card-image {
      height: 180px;
      background-color: rgb(102, 102, 102);
      > img {
        margin: 10px 0 0 70px;
      }
    }
    .analysis-card-desp {
      margin-top: 10px;
      > p {
        font-size: 12px;
        color: #666666;
        margin-top: 5px;
      }
    }
  }
  .k-card {
    margin: 0 25px 15px 0;
    border-radius: 3px;
    border-color: #dfe3e5;
  }
}
</style>
